<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@include file="/jsp/common/head.jsp"%>

<div class="right">
	<div class="location">
		<strong>你现在所在的位置是:</strong>
		<span>订单管理页面</span>
	</div>
	<div class="search">
		<form method="post" action="/billList">
			<span>商品名称：</span>
			<input name="queryProductName" type="text" value="${queryProductName }">

			<span>供应商：</span>
			<select name="queryProviderId">
				<option value="0">--请选择--</option>
				<c:forEach items="${providers}" var="provider">
					<c:if test="${queryProviderId == provider.id}" var="flag">
						<option value="${provider.id}" selected>${provider.proName}</option>
					</c:if>
					<c:if test="${!flag}">
						<option value="${provider.id}">${provider.proName}</option>
					</c:if>
				</c:forEach>
			</select>

			<span>是否付款：</span>
			<select name="queryIsPayment">
				<option value="0">--请选择--</option>
				<option value="1" <c:if test="${queryIsPayment == 1 }">selected</c:if>>未付款</option>
				<option value="2" <c:if test="${queryIsPayment == 2 }">selected</c:if>>已付款</option>
			</select>
			<input type="hidden" name="pageNo" value="1"/>
			<input	value="查 询" type="submit" id="searchbutton">
			<a href="${pageContext.request.contextPath }/bills?method=toAddBill">添加订单</a>
		</form>
	</div>
	<!--账单表格 样式和供应商公用-->
	<table class="providerTable" cellpadding="0" cellspacing="0">
		<tr class="firstTr">
			<th width="10%">订单编码</th>
			<th width="20%">商品名称</th>
			<th width="10%">供应商</th>
			<th width="10%">订单金额</th>
			<th width="10%">是否付款</th>
			<th width="10%">创建时间</th>
			<th width="30%">操作</th>
		</tr>
		<c:forEach items="${pageSupport.data}" var="bill">
			<tr>
				<td>
					<span>${bill.billCode}</span>
				</td>
				<td>
					<span>${bill.productName}</span>
				</td>
				<td>
					<span>${bill.providerName}</span>
				</td>
				<td>
					<span>${bill.totalPrice}</span>
				</td>
				<td>
					<span>
							${bill.isPayment == 1 ? "未付款" : "已付款"}
					</span>
				</td>
				<td>
				<span>
						<fmt:formatDate value='${bill.creationDate}' pattern='yyyy-MM-dd'/>
				</span>
				</td>
				<td>
					<span><a class="viewBill" href="/bills?method=toViewBill&id=${bill.id}" ><img src="${pageContext.request.contextPath }/images/read.png" alt="查看" title="查看"/></a></span>
					<span><a class="modifyBill" href="/bills?method=toModBill&id=${bill.id}" ><img src="${pageContext.request.contextPath }/images/xiugai.png" alt="修改" title="修改"/></a></span>
					<span><a class="deleteBill" href="javascript:void(0);" delBillId="${bill.id}" ><img src="${pageContext.request.contextPath }/images/schu.png" alt="删除" title="删除"/></a></span>
				</td>
			</tr>
		</c:forEach>

	</table>
	<c:import url="rollpage.jsp"></c:import>
</div>
</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeBi">
	<div class="removerChid">
		<h2>提示</h2>
		<div class="removeMain">
			<p>你确定要删除该订单吗？</p>
			<a href="#" id="yes">确定</a>
			<a href="#" id="no">取消</a>
		</div>
	</div>
</div>

<%@include file="/jsp/common/foot.jsp" %>

<script type="text/javascript">
	// 删除弹窗简单用法
	var delBillId;
	function openYesOrNoDLG(){
		$('.zhezhao').css('display', 'block');
		$('#removeBi').fadeIn();
	}

	function cancleBtn(){
		$('.zhezhao').css('display', 'none');
		$('#removeBi').fadeOut();
	}
	function changeDLGContent(contentStr){
		var p = $(".removeMain").find("p");
		p.html(contentStr);
	}

	// 点击删除
	$(".deleteBill").click(function (){
		delBillId = $(this).attr("delBillId");
		changeDLGContent("确定要删除此订单吗？");
		openYesOrNoDLG();
	});

	$('#no').click(function () {
		cancleBtn();
	});

	$('#yes').click(function () {
		// 推荐用ajax实现异步删除
		location.href = "/bills?method=billDel&id=" + delBillId;
	});
</script>